<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<block v-for="(item, index) in list" :key="index">
				<view class="grace-accordion-items grace-border-b">
					<view class="grace-accordion-title" :id="'grace-accordion-'+index" @tap="changeAccordion" :class="{'expand': accordionActive == 'grace-accordion-'+index}">
						<text class="grace-black">{{item.title}}</text>
						<text class="grace-list-imgs-arrow grace-icons icon-arrow-up grace-black9" v-if="accordionActive == 'grace-accordion-'+index"></text>
						<text class="grace-list-imgs-arrow grace-icons icon-arrow-down grace-black9" v-else></text>
					</view>
					<view :class="['grace-accordion-body', accordionActive == 'grace-accordion-'+index ? 'grace-accordion-show' : 'grace-accordion-hide']">
						<view class="content">
							<text>{{item.content}}</text>
						</view>
					</view>
				</view>
			</block>
			<button type="primary" @tap="submit">意见反馈</button>
		</view>
	</gracePage>
</template>

<script>
export default {
	data() {
		return {
			accordionActive: "grace-accordion-0",
			list: [
				{
					title: '客服什么时候在线？',
					content:
						'亲爱的糗友，客服的工作时间为：周一至周六10:00-12:00，14:00-19:00，非工作时间的咨询反馈会自动转为留言，客服上班后会第一时间回复哦~\n\nPS.紧急问题可以加官方XXXXXXX进行反馈'
				},
				{
					title: '忘记账号/昵称/密码再怎么办？',
					content: '亲爱的糗友，客服的工作时间为：周一至周六10:00-12:00，14:00-19:00，非工作时间的咨询反馈会自动转为留言，客服上班后会第一时间回复哦~'
				},
				{
					title: '怎么搜索/查找、关注/取关用户？',
					content: '亲爱的糗友，客服的工作时间为：周一至周六10:00-12:00，14:00-19:00，非工作时间的咨询反馈会自动转为留言，客服上班后会第一时间回复哦~'
				}
			]
		};
	},
	methods: {
		changeAccordion(e){
				var accordionIndex = e.currentTarget.id;
				if (this.accordionActive == accordionIndex){accordionIndex = '';}
				this.accordionActive = accordionIndex;
			},
		submit() {}
	}
};
</script>

<style lang="stylus">
@import "../../graceUI/animate.css";
button
	width 90%
	margin 30upx auto
	color #333333 !important
	background #FFE934 !important
.expand
	background #F1F1F1
.content
	padding 30upx
	font-size 28upx
	line-height 50upx
	background-color #FFFFFF
	color #333333
.grace-accordion-show
	height auto 
	animation fadeIn 300ms linear
.grace-accordion-hide
	height 0
	animation fadeOut 300ms linear
.grace-accordion-title .grace-icons:before
	font-size 30rpx !important
</style>
